@import 'mixins';
@import 'vars';

:host {
    display: flex;
    align-items: center;
    margin-right: .5rem;
}

.user-item {
    @include circle(2.3rem);
    background-color: $color-white;
    display: inline-block;
    margin-right: 0;
    margin-left: -1.1rem;
    padding: 2px;
    position: relative;

    &:hover {
        z-index: 1000 !important;
    }

    .user-picture,
    .user-more {
        border-radius: 1000px;
        border-style: solid;
        border-width: 3px;
    }

    .user-more {
        background: $color-border;
        font-size: 90%;
        font-weight: bolder;
        line-height: 2rem;
        text-align: center;
        z-index: 6;
    }
}